<template>
  <view class="content">
  	<!-- navbar部分 -->
  			<u-navbar
					@leftClick="backHome"
					:autoBack="false"
					:bgColor="'rgba(15, 23, 79,1)'"
					:leftIconColor="'rgba(255,255,255,1)'"
					leftText="巡检报告"
					>
  			</u-navbar>
				<!-- 头部选择区 -->
				<view class="Select">
					<!-- 下拉框 -->
						<uni-data-select
							v-model="value"
							:localdata="range"
							@change="change"
							class="SelectBox"
						>
						</uni-data-select>
	          
						<!-- 时间选择 -->
						 <view class="Databtn">
							<uni-datetime-picker v-model="creater_time" @change="changeLog" />
						 </view>
						 
						 <!-- 搜索按钮 -->
						<button class="topBtn" @click="searchReport">
						 	<uni-icons type="search" size="20" color="#fbfbfc" style="margin-right: 2rpx;"></uni-icons>
						</button>
				</view>
				<!-- 表格区 -->
				<view class="Xjtable">
					<table stripe class="table">
						<!-- 表头行 -->
					<thead>
						<tr>
							<th align="center" width="90rpx">任务名称</th>
							<th align="center" width="95rpx">机器人名称</th>
							<th align="center" width="150rpx">更新时间</th>
							<th align="center" width="60rpx">操作</th>
						</tr>
					</thead>
						<!-- 表格数据行 -->
						<tbody v-if="reportArry.length>0">
							<tr v-for="(item,key) in pagedReportArry" :key="item.id">
								<td align="center">{{item.task_name}}</td>
								<td align="center">{{item.robot_name}}</td>
								<td align="center">{{parseTime(item.creater_time)}}</td>
								<td align="center">
									<image @click="goDetails(item)" src="../../../static/images/home/chakan.png" style="width: 46rpx;height: 46rpx;"></image>
								</td>
							</tr>
						</tbody>
						<tbody v-else>
						    <tr>
									<td colspan="12" style="text-align: center;padding-top: 100rpx;">暂无数据</td>
						    </tr>
						</tbody>
					</table>
				</view>
				<!-- 分页器 -->
				<view class="pageBox" v-if="totalItems > 0" >
				  <button class="Previous" @click="prevPage" :disabled="currentPage === 1">
						<uni-icons type="back" size="20"></uni-icons>
					</button>
				  <view class="pagination" v-for="page in totalPages" :key="page">
				    <button class="paginationBtn"  @click="changeToPage(page)" :class="{ active: page === currentPage }">{{ page }}</button>
					</view>
				  <button class="Nextpage" @click="nextPage" :disabled="currentPage === totalPages">
						<uni-icons type="forward" size="20"></uni-icons>
					</button>
				</view>
	</view>
</template>

<script>
	import {report } from '@/api/Report/Report.js'
	import {equipmentLion} from '@/api/equipment/equipment.js'
	import cookie from '../../../cookie.js'

	
  export default {
    data() {
      return {
				robot_id:undefined,
				alarmtime:undefined,
				token:cookie.get('access_token'),
				secretKey:cookie.get('secretKey'),
				reportArry:[],
				
			  datetimesingle: '',
			  show: true,
			  mode: 'single',
				
				//选择机器人
        value:cookie.get('robotid'),
        text:cookie.get('robot_name'),
				range:[
						{value:"", text:""}
				],
				//被选中机器人的id
				robot_config_id:cookie.get('robotid'),
				//被选中的机器人
				ranges:{},
				//选择的时间
				creater_time:undefined,
				
				
				inputValue: '',
				 
				
				//分页器
				pageSize: 5, // 每页显示条数
				currentPage: 1, // 当前页码
			}
    },
		onLoad() {
		  this.robotList(); // 加载机器人信息
		  this.xjbgList(); // 加载巡检报告
		  this.initPullDownRefresh(); // 初始化下拉刷新
		},
		mounted() {
			this.xjbgList() //巡检报告
		},
		computed: {
		    totalItems() {
		      return this.reportArry.length; // 总数据条数
		    },
		    totalPages() {
		      return Math.ceil(this.totalItems / this.pageSize); // 总页数
		    },
		    pagedReportArry() {
		      const start = (this.currentPage - 1) * this.pageSize;
		      const end = start + this.pageSize;
		      return this.reportArry.slice(start, end); // 当前页的数据
		    },
		},
		methods:{
			initPullDownRefresh() {
			  uni.startPullDownRefresh(); // 主动触发下拉刷新
			},
			onPullDownRefresh() {
				this.creater_time = ''; // 清空当前选择的时间
			  this.refreshData(); // 下拉刷新时执行相应的逻辑操作
			},
			refreshData() {
			    // 下拉刷新时重新加载数据
			    this.robotList(); // 重新加载机器人信息
			    this.xjbgList(); // 重新加载巡检报告
			
			    // 在1秒后停止下拉刷新
			    setTimeout(() => {
			      uni.stopPullDownRefresh();
			    }, 500);
			},
			//分页器
			prevPage() {
			  if (this.currentPage > 1) {
			    this.currentPage--;
			  }
			},
			nextPage() {
			  if (this.currentPage < this.totalPages) {
			    this.currentPage++;
			  }
			},
			changeToPage(page) {
			  if (page === '...') {
				  return;
				}
				this.currentPage = page;
			},
			//获取机器人信息
			robotList(){
				equipmentLion(this.token,this.secretKey).then(Response=>{
					Response.rows.map(item =>{
					  this.range = Response.rows.map(({ id, robot_name }) => ({ value: id, text: robot_name }));
					})
				})
			},
			//巡检报告数据
			xjbgList(){
				report(this.token,this.secretKey,this.robot_config_id,this.creater_time).then(Response=>{
					this.reportArry = Response.rows
				})
			},
			//机器人选择
			change(e) {
				//保存选中机器人的id
				this.ranges = this.range.find(item => item.value === e)
				cookie.set('robotid',this.ranges.value)
				cookie.set('robot_name',this.ranges.text)
				this.robot_config_id = this.ranges.value
				this.xjbgList()
			},
			backHome(){
				uni.switchTab({
					url:'/pages/index'
				})
			},
			goDetails(item){
				//console.log('item',item)
				cookie.set('xjbgtask_id',item.task_id)
				uni.navigateTo({
					url:'/pages/common/details/details'
				})
			},
			changeLog(e) {
				this.creater_time = e.substring(0, 10)
			},
			//搜索按钮
			searchReport(){
				this.robot_id = this.value
				this.xjbgList()
			},
			//处理时间戳
			parseTime(time, pattern) {
			  if (arguments.length === 0 || !time) {
			    return null
			  }
			  const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
			  let date
			  if (typeof time === 'object') {
			    date = time
			  } else {
			    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
			      time = parseInt(time)
			    } else if (typeof time === 'string') {
			      time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
			    }
			    if ((typeof time === 'number') && (time.toString().length === 10)) {
			      time = time * 1000
			    }
			    date = new Date(time)
			  }
			  const formatObj = {
			    y: date.getFullYear(),
			    m: date.getMonth() + 1,
			    d: date.getDate(),
			    h: date.getHours(),
			    i: date.getMinutes(),
			    s: date.getSeconds(),
			    a: date.getDay()
			  }
			  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
			    let value = formatObj[key]
			    // Note: getDay() returns 0 on Sunday
			    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
			    if (result.length > 0 && value < 10) {
			      value = '0' + value
			    }
			    return value || 0
			  })
			  return time_str
			},
			//分页器
			changePage(nowPage) {
					this.nowPage = nowPage
			}
		},
		
	}
	
</script>

<style lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	page{
		 background: #F5F5F5;
	}
	.content {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	}
	.Select{
		width: 710rpx;
		height: 65rpx;
		margin-top: 188rpx;
		z-index: 99;
		display: flex;
		justify-content: center;
		align-items: center;
		// background-color: chartreuse;
	}
	.SelectBox{
		width: 106rpx;
		height: 65rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(22,33,135,0.08);
		border-radius: 10rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
	}
	.SelectBox /deep/ .uni-icons{
		font-size: 0px !important;
	}
	.Databtn{
		width: 320rpx;
		height: 65rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(22,33,135,0.08);
		border-radius: 10rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		color: #999999;
		font-weight: 400;
		margin-left:18rpx;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	.Databtn /deep/ .uni-icons{
		font-size: 0px !important;
	}
	.topBtn{
		width: 88rpx;
		height: 54rpx;
		background: #0F174F;
		border-radius: 27rpx;
		margin-left: 25rpx;
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.Xjtable{
		width: 710rpx;
		height: 760rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(22,33,135,0.08);
		border-radius: 12rpx;
		margin-top: 50rpx;
	}
	.table{
		border: none;
		border-spacing: 0;
	}
	.table thead th{
	    background: #E8E9EF;
	    z-index: 1;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #333333;
			height: 76rpx;
			border: none;
	}
	.table tbody tr {
		height: 64rpx;
		border-radius: 10rpx;
	}
	.table tbody tr:nth-child(even) {
	    background: #F1F4FE;
	}
	
	//分页器
	.pageBox{
		width: 455rpx;
		margin-top: 44rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		//background-color: chocolate;
	}
	//上一页
	.Previous{
		width: 40rpx;
		height: 40rpx;
		background: #EDEDED;
		border: 1px solid #000000;
		// border-radius: 4rpx;
		font-size: 8rpx;
		color: #666666;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	//下一页
	.Nextpage{
		width: 40rpx;
		height: 40rpx;
		border: 1px solid #142150;
		// border-radius: 4rpx;
		font-size: 8rpx;
		color: #666666;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.paginationBtn{
		width: 40rpx;
		height: 40rpx;
		font-size: 16rpx;
		font-family: Myriad Pro;
		font-weight: 400;
		color: #333333;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 20rpx;
		border: 1px solid #142150;
		// border-radius: 4rpx;
	}
	.active{
		width: 40rpx;
		height: 40rpx;
		background: #142150;
		// border-radius: 4rpx;
		font-size: 16rpx;
		font-family: Helvetica;
		font-weight: bold;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
